<template>
  <div id="readContract">
    <h4 class="table">
      <span>{{ this.contractInfos.projectName || '--' }}</span
      >项目农民工劳动（务工）合同（简易版）
      <el-button class="saveBtn exportContract" @click="exportContract"
        >导出</el-button
      >
    </h4>
    <div style="margin-top: 20px" class="clearfix">
      <div class="fr">
        合同编号<span class="empty">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </div>
    </div>
    <ul class="content">
      <li>
        <ul class="partyA">
          <li>
            甲方(用人单位)名称
            <span>{{ this.contractInfos.companyName || '--' }}</span>
          </li>
          <li>
            统一社会信用代码
            <span>{{ this.contractInfos.uscc || '--' }}</span>
          </li>
          <li>
            单位地址
            <span>{{ this.contractInfos.officeAddress || '--' }}</span>
          </li>
        </ul>
      </li>
      <li>
        <ul class="partyB">
          <li class="clearfix">
            <div class="fl box">
              乙方(劳动者)姓名
              <span>{{ this.contractInfos.employeeName || '--' }}</span>
            </div>
            <div class="fr">
              <el-checkbox></el-checkbox>是<el-checkbox
              ></el-checkbox>否为农村居民
            </div>
          </li>
          <li class="clearfix">
            <div class="fl box">
              身份证号码
              <span>{{ this.contractInfos.idcard || '--' }}</span>
            </div>
            <div class="fr">
              <el-checkbox></el-checkbox>是<el-checkbox
              ></el-checkbox>否参加城乡居民社会保险
            </div>
          </li>
          <li class="clearfix">
            <div class="fl box">
              家庭住址
              <span>{{ this.contractInfos.employeeAddress || '--' }}</span>
            </div>
            <div class="fr">
              联系电话
              <span>{{ this.contractInfos.employeeTel || '--' }}</span>
            </div>
          </li>
          <li class="clearfix">
            <div class="fl box">
              紧急联系人
              <span>{{ this.contractInfos.idcard11 || '--' }}</span>
            </div>
            <div class="fr">
              联系电话
              <span>{{ this.contractInfos.idcard22 || '--' }}</span>
            </div>
          </li>
        </ul>
      </li>
      <li>
        根据《中华人民共和国劳动法》、《中华人民共和国劳动合同法》等有关法律法规及建设行业特点，甲乙双方经平等协商一致，依法签订本合同，共同遵守本合同所列条款。
      </li>
      <li>
        <p>一 、合同期限</p>
        <div>
          &nbsp;经甲乙双方协商一致，本合同从
          <span>{{ this.contractInfos.beginTimeYear || '--' }}</span
          >年 <span>{{ this.contractInfos.beginTimeMonth || '--' }}</span
          >月 <span>{{ this.contractInfos.beginTimeDay || '--' }}</span
          >日 起至 <span>{{ this.contractInfos.endTimeYear || '--' }}</span
          >年 <span>{{ this.contractInfos.endTimeMonth || '--' }}</span
          >月 <span>{{ this.contractInfos.endTimeDay || '--' }}</span
          >日 / 结束务工离场截止。
        </div>
      </li>
      <li>
        <p>二 、工作内容和工作地点</p>
        <ul>
          <li>
            （一）甲方招用乙方担任项目名称：
            <span>{{ this.contractInfos.projectName || '--' }}</span
            >；
          </li>
          <li>
            （二）项目（工作）地址：
            <span>{{ this.contractInfos.officeAddress || '--' }}</span
            >，岗位(工种)：
            <span>{{ this.contractInfos.workTypeName || '--' }}</span
            >，所属班组： <span>{{ this.contractInfos.groupName || '--' }}</span
            >。
          </li>
          <li>
            （三）乙方应按照甲方要求，参加甲方工作培训，服从项目实名制管理，遵守工作纪律和项目规章制度，完成工作并达到质量标准。
          </li>
          <li>
            （四）甲方可与乙方协商一致后调整乙方工作地点及岗位并签订补充约定。
          </li>
        </ul>
      </li>
      <li>
        <p>三 、计酬方式</p>
        <div>
          甲乙双方协商一致选择实行以下方式计酬：
          <br />
          <el-checkbox></el-checkbox>计时工资：按小时<el-checkbox
          ></el-checkbox>日<el-checkbox></el-checkbox>周<el-checkbox
          ></el-checkbox>月计酬，计酬单价：<span>{{
            this.contractInfos.singlePriceDay || '--'
          }}</span
          >元；
          <br />
          <el-checkbox></el-checkbox>计件工资：按
          <span>{{ this.contractInfos.unitName || '--' }}</span
          >计酬，计酬单价：<span>{{
            this.contractInfos.singlePriceOther || '--'
          }}</span
          >元；
          <br />
          <el-checkbox></el-checkbox
          >按完成一定任务量计酬：每月支付部分工资（不得低于最低工资标准），完成任务量后三日内完成计量核算并支付余额。
        </div>
      </li>
      <li>
        <p>四、工资支付日期</p>
        <ul>
          <li>
            &nbsp;甲方每月编制工资表并由乙方本人签字确认，委托总承包单位每月<span
              >{{ this.contractInfos.salaryDay || '--' }}</span
            >日发放乙方的工资。在乙方结束务工后，甲方会同项目总承包单位应当在最近工资支付周期内一次性结清乙方的工资。
          </li>
        </ul>
      </li>
      <li>
        <p>五 、劳动保护和劳动条件</p>
        <ul>
          <li>
            甲方按照国家有关规定落实劳动保护措施、提供劳动条件并依法制定规章制度，乙方应当遵守。
          </li>
        </ul>
      </li>
      <li>
        <p>六 、工资待遇和保险待遇</p>
        <ul>
          <li>（一）双方约定的实际工资支付数额不得低于当地最低工资标准。</li>
          <li>（二）乙方在本工程项目务工期间享受工伤保险待遇。</li>
          <li>（三）符合国家法定应扣应缴费用的，由甲方告知乙方后扣除缴纳。</li>
          &nbsp;本合同一式三份，甲乙双方各执一份，并交总包单位备案一份。本合同自双方盖章签字之日起生效。双方因工价、工量、工资、工伤待遇等问题产生纠纷的，应分别通过项目协调机构、行业主管部门、劳动保障行政部门、劳动争议仲裁及司法部门解决。
        </ul>
      </li>
      <li>
        <p>
          七 、补充约定事项：<span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          >
        </p>
      </li>

      <li class="clearfix singleBox">
        <div class="fl">
          <P>
            甲方(公 章)：
            <span>{{ this.contractInfos.companyName || '--' }}</span>
          </P>
          <p>
            法定代表人或委托代理人：
            <span>{{ this.contractInfos.boss333 || '--' }}</span>
          </p>
          签订时间：
          <span>{{ this.contractInfos.inputDate22 || '--' }}</span>
        </div>
        <div class="fr pic">
          <P>乙方(签字按手印)：</P>签订时间：
          <span>{{ this.contractInfos.confirmDate22 || '--' }}</span>
        </div>
      </li>
      <li>
        <img class="img" src="../../../static/img/employee/wgjs.png" alt="" />
      </li>
      <li>
        <img class="img" src="../../../static/img/employee/fyj.png" alt="" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  //搜索条件
  props: {
    contractInfos: {
      type: Object,
    },
  },

  methods: {
    exportContract() {
      this.$emit('exportContract', '')
    },
  },
}
</script>
<style scoped lang="less">
#readContract h4 {
  text-align: center;
}
.content {
  padding: 5px 35px;
}
.content li {
  margin-bottom: 20px;
  text-align: left;
}
.content li ul li {
  margin-bottom: 0px;
  padding-left: 20px;
}
#readContract .content .partyA li,
#readContract .content .partyB li {
  padding-left: 0px;
}
#readContract .content .partyA #companyName {
  display: inline-block;
  padding: 0px;
  width: 235px;
}
#readContract .content .partyA #companyCode {
  display: inline-block;
  padding: 0px;
  width: 243px;
}
#readContract .content .partyA #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 272px;
}
#readContract .content .partyB#companyCode {
  display: inline-block;
  padding: 0px;
  width: 239px;
}
#readContract .content .partyB #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 263px;
}
#readContract .content .partyB #employeeName {
  display: inline-block;
  padding: 0px;
  width: 248px;
}
#readContract .content .partyB #employeeBirthday {
  display: inline-block;
  padding: 0px;
  width: 299px;
}
#readContract .content .partyB #employeeIdcard {
  display: inline-block;
  width: 285px;
  padding: 0px;
}
.content li div {
  padding-left: 20px;
}
.content li .box {
  padding-left: 0;
}
.content li span {
  text-align: center;
  padding: 0px 15px;
  border-bottom: 1px solid black;
}
.content li p {
  margin-bottom: 0px;
  font-size: 14px;
}
.content li div input {
  height: 18px;
  width: 18px;
  vertical-align: bottom;
  margin-right: 10px;
  opacity: 1;
  position: static;
  margin-left: 50px;
}
.content li div label:nth-child(2) {
  margin-left: 50px;
}
#readContractWin + .dialog-button > a {
  opacity: 0;
}
.exportContract {
  float: right;
  height: 32px;
  font-size: 14px;
  padding: 0 10px;
}
.imgCss {
  width: 100px;
  margin-right: 50px;
}
.attendanceDialog .el-form--inline .el-form-item {
  margin-right: 0px;
}

li .pic img {
  vertical-align: top;
  width: 40%;
}

.singleBox div {
  widows: 50%;
}
/deep/ .dialogTable img {
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

.img {
  width: 100%;
}

#readContract .content .el-checkbox {
  margin: 0 2px;
}

.table span,
.empty {
  text-align: center;
  widows: 20px;
  padding: 0px 5px;
  border-bottom: 1px solid black;
}
.content li {
  line-height: 21px;
}
</style>
